<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
</head>
<body>
<h1>注册页面</h1>
<form id="regist_form" method="get" action="./user.do">
    <input type="hidden" name="action" value="regist">
    会员邮箱:<input type="text" id="email" name="email"/><br/>
    会员名称:<input type="text" id="username" name="username"/><span id="usernameTip"></span> <br/>
    会员密码:<input type="password" id="password" name="password"/><br/>
    重复密码:<input type="password" id="repassword" name="repassword"/><br/>
    联系电话:<input type="text" id="telephone" name="telephone"/><br/>
    性别:<input type="radio" value="male" name="gender">男<input type="radio" value="female" name="gender">女<br/>
    个人介绍:<textarea name="introduce" id="introduce"></textarea><br/>
    <button id="submit_btn" type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">返回</button>
</form>
<script type="text/javascript">
    //1.会员邮箱格式校验
    //2.密码和重复密码相同校验
    //3.电话格式校验
    //4.性别单选框
    //5.所有属性都要非空
    //6.用户名、密码4-20位
    //给提交按钮绑定点击事件
    var isEmpty = function (str) {
        if (str == null || str == '') {
            return true;
        } else {
            return false;
        }
    }
    $(function () {
        $('#regist_form').submit(function () {
            //获取密码和重复密码
            var emailText = $('#email').val().trim();
            var usernameText = $('#username').val().trim();
            var passwordText = $('#password').val().trim();
            var repasswordText = $('#repassword').val().trim();
            var telephoneText = $('#telephone').val().trim();
            var introduceText = $('#introduce').val().trim();
            if (isEmpty(usernameText)) {
                alert('用户名不能为空！');
                //1.绑定表单的提交事件时，阻止页面表单内容的提交
                //2.阻止代码继续运行
                return false;
            }
            if (isEmpty(passwordText)) {
                alert('密码不能为空！');
                return false;
            }
            if (isEmpty(repasswordText)) {
                alert('重复密码不能为空！');
                return false;
            }
            if (isEmpty(telephoneText)) {
                alert('电话号码不能为空！');
                return false;
            }
            if (isEmpty(emailText)) {
                alert('邮箱不能为空！');
                return false;
            }
            //特别注意：单选框和文本框不一样，判空要针对是否选中对象进行判断
            var $gender = $('[name="gender"]:radio:checked');
            if ($gender.length == 0) {
                alert('性别不能为空！');
                return false;
            }
            if (isEmpty(introduceText)) {
                alert('自我介绍不能为空！');
                return false;
            }
            if (passwordText != repasswordText) {
                alert('密码和重复密码不一致！');
                return false;
            }
        });
        //给用户名输入框 添加 失去焦点事件
        $('#username').blur(function () {
            var usernameText = $('#username').val().trim();
            //使用ajax 传输到后端
            $.ajax({
                url: "./user.do",
                data: {username: usernameText, action: 'isExists'},
                type: "GET",
                success: function (data) {
                    //回调函数
                    if (data) {
                        //用户名重复
                        $("#usernameTip").css('color', 'red');
                        $("#usernameTip").text('用户名已被注册');
                    } else {
                        //用户名不重复
                        $("#usernameTip").css('color', 'green');
                        $("#usernameTip").text('用户名可以注册');
                    }
                },
                dataType: "text"
            });
        });
        //给用户名输入框 添加获得焦点事件
        $('#username').focus(function () {
            $("#usernameTip").css('color', 'gray');
            $("#usernameTip").text('用户名4-20位，不能为空');
        });
    });
</script>
</body>
</html>